<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" th:href="@{/themes/default/easyui.css}">
    <link rel="stylesheet" th:href="@{/themes/icon.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<table id="dg"></table>
<div id="toolbar">
    <a class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-permission'" onclick="roleAuth()">角色授权</a><br>
    <input type="text">
    <a class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>

    <!--角色授权模态框-->
    <div id="treeDlg" class="easyui-dialog" data-options="title:'角色授权',width:300,height:500,modal:true,buttons:'#buts',closed:true">
        <ul id="tree"></ul>
    </div>
    <div id="buts">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="execAuth()">保存</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'">取消</a>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jquery.easyui.min.js}"></script>
<script th:src="@{/js/easyui-lang-zh_CN.js}"></script>
<script th:inline="javascript">
    var url=[[@{/}]]
</script>
<script th:inline="none">

    function execAuth(){
        var nodes=$("#tree").tree("getChecked");
        var keys=[];
        for (var i=0;i<nodes.length;i++){
            keys[i]=nodes[i].id;
        }
        var params="roleId="+$("#dg").datagrid("getSelections")[0].roleId+"&authIds="+keys;
        $.post(url+"role/updateAuth",params,function (result) {
            if(result.code==200){
                $.messager.alert('系统提示','授权成功');
                $("#treeDlg").dialog("close");
            }else{
                $.messager.alert('系统提示','授权失败');
            }
        });
    }
    $("#dg").datagrid({
        url:url+'role/list',
        toolbar:"#toolbar",
        pagination:true,
        title:'用户列表',
        fit:true,
        fitColumns:true,
        pageNumber:1,
        rownumbers:true,
        pageSize:5,
        pageList:[5,10,15],
        columns:[[
            {checkbox:true},
            {field:'roleId',title:'编号',width:80,align:'center'},
            {field:'roleName',title:'角色名称',width:200,align:'center'},
            {field:'roleDescription',title:'备注',width:200,align:'center'}
        ]]
    })

    function roleAuth() {
        $("#treeDlg").dialog("open");
        var rows = $("#dg").datagrid("getSelections");
        if(rows.length != 1){
            $.messager.alert('系统提示','请选择一条数据');
            return ;
        }

        var eventNode = null;

        $("#tree").tree({
            url:url+"role/loadTree?roleId="+rows[0].roleId,
            checkbox:true,
            cascadeCheck:false,
            onLoadSuccess:function (node) {
                $("#tree").tree("expandAll");
            },
            onCheck:function (node,checked) {
                if(!eventNode){
                    treeUp = true;//标致向上开始
                    eventNode = node;
                }
                if(treeUp){
                    var parent = $("#tree").tree("getParent",node.target);//当前节点的父节点对象
                    console.log(parent);
                    if(parent != null){
                        if(checked){//选中
                            $("#tree").tree("check",parent.target);
                        }else{ //取消选中
                            var arr = $("#tree").tree("getChildren",parent.target);//获取当前节点的父节点的所有子节点
                            var isChecked = false;
                            for(var i in arr){
                                if(arr[i].checked){ //只要该父节点下有任何一个子节点被选中，则跳出循环
                                    isChecked = true;
                                    break;
                                }
                            }
                            if(!isChecked){//当前节点的父节点下没有任何子节点被选中，则同时取消父节点的选中。
                                $("#tree").tree("uncheck",parent.target);
                            }
                        }
                    }
                    treeUp = false;//标致向上查找节点结束
                }
                if(!treeUp && eventNode){
                    //获取当前节点(触发事件的节点)的所有子节点
                    var childrens = $("#tree").tree("getChildren",eventNode.target);
                    eventNode = null;//标致本次事件结束
                    for(var i in childrens){ //3
                        if(checked){//选中
                            $("#tree").tree("check",childrens[i].target);
                        }else{//取消选中
                            $("#tree").tree("uncheck",childrens[i].target);
                        }
                    }
                }
            }
        })
    }
</script>
</body>
</html>